<template>
    <!--结算弹框-->
    <el-dialog
            title="配送地址录入"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible"
            width="50%">
        <el-form ref="form" label-width="120px" :model="ruleForm" :rules="rules" style="z-index: 999999"
                 class="demo-ruleForm">
            <el-form-item label="收件人：" prop="receipt">
                <el-input v-model="ruleForm.receipt" type="text" maxlength="20" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="联系电话：" prop="receiptPhone">
                <el-input v-model="ruleForm.receiptPhone" type="text" maxlength="11" placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item label="地址：" prop="address">
                <el-select
                        style="width: 100%"
                        @change="addressChange"
                        v-model="ruleForm.address"
                        filterable
                        clearable
                        remote
                        placeholder="请输入关键词"
                        :remote-method="remoteMethod"
                        :loading="loading">
                    <el-option
                            v-for="(item,i) in addList"
                            :key="i"
                            :label="item.title+'-'+item.address"
                            :value="item.id">
                    </el-option>
                </el-select>
                <input type="text" id="suggestId" v-model="text" v-show="false">
            </el-form-item>
            <el-form-item label="详细地址：" prop="addressInfo">
                <el-input v-model="ruleForm.addressInfo" type="text" maxlength="50"
                          placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="送达日期：" prop="deliveryDate">
                <el-date-picker
                        v-model="ruleForm.deliveryDate"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="寄语：" prop="remarks">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入"
                        v-model="ruleForm.remarks">
                </el-input>
            </el-form-item>
            <el-form-item label="备注：" prop="note">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入"
                        v-model="ruleForm.note">
                </el-input>
            </el-form-item>
        </el-form>
        <div v-show="false" id="container" style="width: 100%;height: 300px"></div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="ok()">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    export default {
        name: "settlementDia",
        data() {
            return {
                dialogVisible: false,
                ruleForm: {
                    //收件人
                    receipt: "",
                    //联系电话
                    receiptPhone: "",
                    //地址详细
                    addressInfo: "",
                    //送达时间
                    deliveryDate: "",
                    //寄语
                    remarks: "",
                    //备注
                    note: "",
                },
                rules: {
                    receipt: [{required: true, message: '请输入', trigger: 'blur'}],
                    receiptPhone: [{required: true, message: '请输入', trigger: 'blur'}],
                    address: [{required: true, message: '请选择', trigger: 'blur'}],
                    deliveryDate: [{required: true, message: '请选择', trigger: 'blur'}],
                },
                //搜索示例
                local: null,
                //锚点
                marker: null,
                //地址集合
                addList: [],
                //地址输入框文本
                text: "",
                //地图示例
                map: null,
                //加载
                loading: false,
            }
        },
        methods: {
            ok() {
                let params = Object.assign(this.$util.copyBean(this.ruleForm), {
                    shippingAddress: this.ruleForm.address + "{" + this.ruleForm.addressInfo + "}",
                    details: this.$cart.get().map(x => {
                        return {
                            goodsId: x.id,
                            number: x.number,
                        }
                    })
                })
                this.$HttpService.post("/info-order/add", params).then(res => {
                    this.$message.success('购买成功！');
                    this.$cart.empty()
                    this.$parent.tableData=this.$cart.get();
                    this.dialogVisible=false;
                })
            },

            openDia() {
                this.dialogVisible = true;
                this.$nextTick(() => {
                    this.initMap();
                });

            },

            addressChange(id) {
                let obj = this.addList.filter(x => x.id == id)[0];
                this.ruleForm.address = obj.address;
                this.ruleForm.lng = obj.point.lng;
                this.ruleForm.lat = obj.point.lat;
            },
            remoteMethod(query) {
                this.text = query;
                this.local.search(query);
                this.loading = true;
            },
            initMap() {
                let vm = this;
                this.map = new BMapGL.Map('container');
                var point = new BMapGL.Point(116.331, 39.923);
                this.map.centerAndZoom(point, 15);
                this.map.enableScrollWheelZoom(true);
                this.marker = new BMapGL.Marker(point);
                this.map.addOverlay(this.marker);
                var options = {
                    onSearchComplete: results => {
                        // 判断状态是否正确
                        if (vm.local.getStatus() == BMAP_STATUS_SUCCESS) {
                            var s = [];
                            vm.addList = results._pois.map(x => {
                                return {
                                    address: x.address,
                                    city: x.city,
                                    title: x.title,
                                    point: x.point,
                                    id: this.$util.uuid(),
                                }
                            })

                            vm.loading = false;
                        }
                    }
                };
                this.local = new BMapGL.LocalSearch(this.map, options);
            },

        }
    }
</script>

<style scoped>

</style>
